<template>
	<view>
		<view class="u-flex-col u-col-center u-p-t-60">
			<image :src="tip.image" mode="aspectFill" style="width: 520rpx;height: 680rpx;border-radius: 24rpx 24rpx 0 0;"></image>
			<view class="u-flex u-row-between u-light-color u-p-l-20 u-p-r-20 u-p-t-15 u-p-b-15 u-font-11" style="width: 520rpx;border-radius:  0 0 24rpx 24rpx;" :style="{background: vk.getVuex('$app.config.bg.tab')}">
				<view class="u-flex-col u-row-center u-col-center" @click="downClick(tip.image)">
					<u-icon name="photo" :color="vk.getVuex('$app.config.color.light')" size="36"></u-icon>
					<view class="">保存图片</view>
				</view>
				<view class="u-flex-col u-row-center u-col-center" style="position: relative;" @click="copyClick(tip.link)">
					<u-icon name="attach" :color="vk.getVuex('$app.config.color.light')" size="36"></u-icon>
					<view class="">发给朋友</view>
					<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
				</view>
				<view class="u-flex-col u-row-center u-col-center" style="position: relative;" @click="kefuClick">
					<u-icon name="server-fill" :color="vk.getVuex('$app.config.color.light')" size="36"></u-icon>
					<view class="">联系客服</view>
					<button open-type="contact" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
				</view>
			</view>
		</view>
		<view class="u-text-center u-p-t-40 u-p-b-30 u-font-18" style="font-weight: 550;" :style="{color: vk.getVuex('$app.config.color.main')}">{{tip.name}}</view>
		<view class="u-text-center u-tips-color u-font-13 u-p-b-15" :style="{color: vk.getVuex('$app.config.color.tips')}">兑换须知：每个作品有效期为3个月，过期失效</view>
		<view class="u-m-l-50 u-m-r-50 u-m-t-40 u-m-b-40 u-flex u-row-between u-col-center">
			<view class="btn user" style="position: relative;">
				<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
				分享好友
			</view>
			<view class="btn" @click="modelClick" :style="{backgroundImage: !tip.cdkList || tip.cdkList.length===0?vk.getVuex('$app.config.bg.button_dis'):vk.getVuex('$app.config.bg.button'), color: !tip.cdkList || tip.cdkList.length===0?vk.getVuex('$app.config.color.button_dis'):vk.getVuex('$app.config.color.button')}">
				{{!tip.cdkList || tip.cdkList.length===0?'库存不足':'立即兑换'}}
			</view>
		</view>
		<!-- <view class="u-flex u-row-center" style="width: 750rpx;" v-if="tip.type != 2" @click="yyClick">
			<view class="u-flex u-row-left u-p-l-20" style="background-color: #FFFFFF;border-radius: 10rpx 0 0 10rpx;line-height: 70rpx;width: 450rpx;">
				<view class="u-font-26 u-light-color">距下次开抢：</view>
				<u-count-down :timestamp="54214" :show-days="false" separator="zh" separator-size="26" separator-color="#808080" color="#ff6666" @end="endClick"></u-count-down>
			</view>
			<view class="u-flex u-row-center" style="border-radius: 0 10rpx 10rpx 0;color: #FFFFFF;line-height: 70rpx;width: 200rpx;" :style="{backgroundColor: message && message.status===0?'#ffa6a6':'#FF6666'}">
				<u-icon name="bell-fill" color="#FFFFFF" size="28"></u-icon>
				<view class="u-p-l-10">{{message && message.status===0?'已订阅':'订阅提醒'}}</view>
			</view>
		</view>
		<view class="safe-area-inset-bottom" style="height: 20rpx;"></view>
		<view v-if="maskFlag" class="mask" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.6);">
			<view class="u-text-center" style="font-size: 36rpx;font-weight: 550;line-height: 80rpx;color: #d6d6d6;padding-top: 25vh;">
				<view class="">1、勾选底部“◯总是保持以上选择”</view>
				<view class="">2、点击<text style="background-color: #00ad3a;color: #FFF;padding: 0 15rpx;border-radius: 6rpx;font-size: 28rpx;margin: 0 15rpx;">允许</text>不再错过“预约提醒”</view>
			</view>
		</view> -->
		<view class="u-m-40">
			<ad v-if="vk.getVuex('$setting.client.banner_id')" :unit-id="vk.getVuex('$setting.client.banner_id')" type="banner" ad-theme="black"></ad>
		</view>
		<view class="" style="height: 1px;"></view>
		
		<models v-if="loginShow"
		title="为了更好的玩机体验，点击下方按钮授权登录吧~"
		btnText="授权登录" 
		:authorize="true"
		@mask="loginShow = false" 
		@close="loginShow = false"></models>
		
		<models v-if="modelShow"
		:title="modelTitle"
		btnText="立即兑换" 
		closeText="再想想看~" 
		@mask="modelShow = false" 
		@close="modelShow = false" 
		@save="playClick"></models>
		
		<models v-if="cdkShow"
		:title="cdkTitle"
		btnText="复制卡密" 
		closeText=" " 
		@mask="cdkShow = false" 
		@close="cdkShow = false" 
		@save="cdkClick"></models>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 登录弹窗
				loginShow: false,
				modelShow: false,
				modelTitle: '',
				cdkShow: false,
				cdkTitle: '',
				cdkVlaue: '',
				tip: {}
			}
		},
		async onLoad({id}) {
			let that = this
			await that.getDetail(id)
		},
		methods: {
			async getDetail(id){
				let that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/findOne',
					data: {
						dbName: 'bus-wx-tip',
						whereJson: {
							_id: id
						},
						foreignDB: [{
							dbName: "bus-wx-tip-cdk",
							localKey:"_id",
							whereJson: {
								status: 1
							},
							foreignKey: "tip_id",
							as: "cdkList"
						}]
					}
				});
				that.tip = data.info
			},
			downClick(url){
				let that = this
				if(!that.vk.getVuex('$user.userInfo._id')){
					that.loginShow = true
					return
				}
				var extension = url.substring(url.lastIndexOf('.') + 1)
				let fileName = new Date().valueOf();
				uni.downloadFile({
					url: url,
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.' + extension,
					success: (res) => {
						var benUrl = res.filePath
						//图片保存到本地相册
						uni.saveImageToPhotosAlbum({
							filePath: benUrl,
							//授权成功，保存图片
							success: function(data) {
								uni.showToast({
									icon: 'none',
									title: '保存成功！',
									duration: 1500
								})
							},
							//授权失败
							fail: function(err) {
								if (err.errMsg) {
									uni.showToast({
										icon: 'none',
										title: '无权限，请打开相册权限！',
										duration: 1500
									})
								}
							}
						});
					},
					fail: (error) => {
						console.log(error)
					}
				})
			},
			copyClick(e){
				let that = this
				if(!that.vk.getVuex('$user.userInfo._id')){
					that.loginShow = true
					return
				}
				if(e){
					uni.setClipboardData({
						data: this.tip.name+" - 🧧红包封面👉 "+e,
						success: function(res) {
							uni.showToast({
								icon: 'none',
								title: '复制成功'
							});
						}
					});
				}
			},
			modelClick(){
				let that = this
				if(!that.vk.getVuex('$user.userInfo._id')){
					that.loginShow = true
					return
				}
				if(!that.tip.cdkList || that.tip.cdkList.length === 0) return
				that.modelTitle = "<div style='padding-top: 10px;'>使用<span class='num' style='color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+that.tip.score+"</span>"+that.vk.getVuex('$setting.score.name')+"兑换该作品，当前有<span class='num' style='color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+that.vk.getVuex('$user.userInfo.score')+"</span>"+that.vk.getVuex('$setting.score.name')+"，点击下方按钮兑换~</div>"
				that.modelShow = true
			},
			async playClick(){
				let that = this
				that.modelShow = false
				uni.showLoading({
					mask: true,
					title: '兑换中...'
				});
				let res = await that.vk.callFunction({
					url: 'client/wechat/list/kh/upCdk',
					data: {
						tip_id: that.tip._id,
						user_id: that.vk.getVuex('$user.userInfo._id')
					}
				})
				uni.hideLoading()
				that.cdkVlaue = res.cdk
				that.cdkTitle = "<div style='padding-top: 10px;'>兑换成功，点击按钮复制卡密</div><div style='padding-top: 10px;'><span class='num' style='text-align: center;color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+res.cdk+"</span></div>"
				that.cdkShow = true
				that.vk.setVuex('$user.userInfo.score', res.score)
			},
			cdkClick(){
				let that = this
				that.cdkShow = false
				uni.setClipboardData({
					data: that.cdkVlaue,
					success: function(res) {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			// 授权登录
			getUserInfo(){
				var that = this
				that.loginShow = false
				uni.showLoading({
					mask: true,
					title: '授权中...'
				})
				uni.getUserProfile({
				    desc: '更新您的个人信息',
				    success: async (res) => {
						uni.hideLoading()
						uni.login({
							success: async function({code}) {
								let data = await that.vk.myfn.userLogin(code,res.userInfo)
							},
						});
				    },
				    fail(err){
						uni.hideLoading()
					    uni.showToast({
							icon: 'none',
							title: '授权失败',
							duration: 1500
					    })
				    }
				})
			},
		},
		onShareAppMessage(res) {
			return {
				title: '这个红包封面送给你~',
				imageUrl: this.tip.image,
				path: 'pages/index/index?inviteId='+(this.vk.getVuex('$user.userInfo._id')?this.vk.getVuex('$user.userInfo._id'):'')
			}
		},
		onShareTimeline(res) {
			return {
				title: '送你一个红包封面，手慢无快来抢~',
				imageUrl: this.tip.image,
				path: 'pages/index/index'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		width: 48%;
		height: 90rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		text-align: center;
		position: relative;
		font-weight: 550;
	}
	.user{
		background-color: #ffd9d9;
		color: #ff6161;
	}
	
	/deep/ .num{
		font-size: 16px;
		font-weight: 700;
		padding: 0 8rpx;
	}
</style>
